<template>
  <div class="vip">
    <header>
      <div class="back" @click="$router.go(-1)"></div>
      <span>PLUS会员</span>
    </header>
    <main>
      <div class="vippci">
        <img :src="card.url" alt="" />
      </div>
      <h5>PLUS会员权益</h5>
      <div class="equity">
        <div class="ic">
          <img
            src="https://img0.baidu.com/it/u=2889219631,382509863&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
            alt=""
          />
          <p>会员立减88</p>
        </div>
        <div class="ic">
          <img
            src="https://img2.baidu.com/it/u=1407446869,3545171544&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
            alt=""
          />
          <p>我的收藏</p>
        </div>
        <div class="ic">
          <img
            src="https://img1.baidu.com/it/u=515441435,2888563181&fm=253&fmt=auto&app=138&f=JPEG?w=545&h=500"
            alt=""
          />
          <p>优惠券红包</p>
        </div>
        <div class="ic">
          <img
            src="https://img2.baidu.com/it/u=2390989622,1167965868&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
            alt=""
          />
          <p>美悦钱包</p>
        </div>
        <div class="ic">
          <img
            src="https://img0.baidu.com/it/u=2889219631,382509863&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
            alt=""
          />
          <p>会员立减88</p>
        </div>
        <div class="ic">
          <img
            src="https://img2.baidu.com/it/u=1407446869,3545171544&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
            alt=""
          />
          <p>我的收藏</p>
        </div>
        <div class="ic">
          <img
            src="https://img1.baidu.com/it/u=515441435,2888563181&fm=253&fmt=auto&app=138&f=JPEG?w=545&h=500"
            alt=""
          />
          <p>优惠券红包</p>
        </div>
        <div class="ic">
          <img
            src="https://img2.baidu.com/it/u=2390989622,1167965868&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
            alt=""
          />
          <p>美悦钱包</p>
        </div>
      </div>
      <van-button type="danger" :disabled="flag" round class="out"
        >开通会员</van-button
      >
      <van-checkbox
        @click="bian"
        icon-size="20px"
        v-model="checked"
        class="agree"
        >已阅读并同意<span class="red">《悦美PLUS会员用户协议》</span></van-checkbox
      >
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      card: {
        url: "https://img2.baidu.com/it/u=113679163,1310466460&fm=253&fmt=auto&app=138&f=JPEG?w=811&h=500",
      },
      checked: false,
      flag: true,
    };
  },
  methods: {
    bian() {
      this.flag = !this.flag;
    },
  },
};
</script>

<style scoped lang="scss">
header {
  width: 100%;
  height: 100px;
  border-bottom: 1px solid #c0c0c0;
  text-align: center;
}
header .back {
  float: left;
  margin-top: 32.5px;
  margin-left: 20px;
  width: 19px;
  height: 35px;
  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/pshvf6oyob5e2v34gvjdf963utrfrmi7si6b18e2f0-ee71-4c15-a09d-11de00a665d4) -1px -1px
    no-repeat;
  background-size: 20px 37px;
}
header span {
  line-height: 100px;
  font-size: 30px;
}
.vip {
  main {
    text-align: center;
    .vippci {
      width: 550px;
      height: 350px;
      margin: 0 auto;
      margin-top: 100px;
      border-radius: 20px;
      overflow: hidden;
      img {
        width: 550px;
        height: 350px;
      }
    }
    h5 {
      margin-top: 50px;
    }
    .equity {
      width: 100%;
      height: 400px;
      margin-top: 20px;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      .ic {
        display: block;
        text-align: center;
        width: 24%;
        height: 48%;
        font-size: 20px;
        color: gray;
        img {
          width: 100px;
          overflow: hidden;
          height: 100px;
          border-radius: 50%;
        }
      }
    }
    .out {
      width: 500px;
      height: 100px;
      font-size: 50px;
    }
    .agree {
      font-size: 25px;
      margin: 0 auto;
      width: 550px;
      height: 150px;
      .van-checkbox__label {
        width: 200px;
        height: 100px;
        line-height: 100px;
      }
      .red{
        color: red;
      }
    }
  }
}
</style>
